<template>
    <div>
        <el-card>
            <!-- 页面头部导航 -->
             <!-- 二级标题，显示当前页面功能 -->
              <!-- 头部图标（未配置） -->
                 <!-- 主标题，标识模块名称 -->
            <el-page-header
                content="资料列表"           
                icon=""                     
                title="资料管理"           
            />

            <!-- 资料列表表格 -->
              <!-- 绑定表格数据源 -->
               <!-- 表格宽度占满容器 -->
            <el-table
                :data="state.tableData"    
                style="width: 100%"          
            >
                <!-- 标题列 -->
                 <!-- 对应数据字段名 -->
                    <!-- 列标题 -->
                       <!-- 列宽度 -->
                <el-table-column
                    prop="title"              
                    label="标题"            
                    width="180"            
                />

                <!-- 分类列（通过自定义函数格式化显示） -->
                <el-table-column label="分类">
                    <template #default="scope">
                        {{ categoryFormat(scope.row.category) }} <!-- 使用分类格式化函数转换数值为文本 -->
                    </template>
                </el-table-column>

                <!-- 操作列 -->
                <el-table-column label="操作">
                    <template #default="scope">
                        <!-- 预览按钮 -->
                          <!-- 圆形按钮样式 -->
                             <!-- 图标组件 -->
                                 <!-- 成功类型按钮 -->
                                  <!-- 点击触发预览函数 -->
                        <el-button
                            circle                 
                            :icon="Star"          
                            type="success"       
                            @click="handlePreview(scope.row)" 
                        ></el-button>

                        <!-- 编辑按钮 -->
                           <!-- 圆形按钮样式 -->
                              <!-- 编辑图标 -->
                               <!-- 点击跳转到编辑页面 -->
                        <el-button
                            circle                
                            :icon="Edit"          
                            @click="handleEdit(scope.row)"   
                        ></el-button>

                        <!-- 删除确认弹窗 -->
                        <!-- 确认按钮文本 -->
                          <!-- 取消按钮文本 -->
                            <!-- 确认删除时触发的回调 -->
                        <el-popconfirm
                            title="你确定要删除吗?"   
                            confirmButtonText="确定"  
                            cancelButtonText="取消"   
                            @confirm="handleDelete(scope.row)"
                        >
                            <template #reference>    <!-- 触发弹窗的按钮模板 -->
                                 <!-- 删除图标 -->
                                  <!-- 危险类型按钮 -->
                                <el-button
                                    circle                 
                                    :icon="Delete"         
                                    type="danger"           
                                ></el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>

        <!-- 资料预览弹窗 -->
         <!-- 控制弹窗显示状态的响应式变量 -->
           <!-- 弹窗标题 -->
             <!-- 弹窗宽度 -->
        <el-dialog
            v-model="dialogVisible"      
            title="预览资料"             
            width="50%"                  
        >
            <div>
                <h2>{{ previewData.title }}</h2>             <!-- 显示资料标题 -->
                <el-divider>
                </el-divider>
                    <!-- 渲染富文本内容 -->
                <div
                    v-html="previewData.content"          
                    class="htmlcontent"
                ></div>
            </div>
        </el-dialog>
    </div>
</template>

<script setup>
// 引入Vue组合式API
import { ref, onMounted, reactive } from "vue";
// 引入HTTP请求库
import axios from "axios";
// 引入Element Plus图标组件
import { Star, Edit, Delete} from "@element-plus/icons-vue";
// 引入路由和状态管理相关钩子
// 正确：从 vuex 导入 useStore
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';


// 获取Vuex存储实例、当前路由参数和路由实例
const store = useStore();
const router = useRouter();

// 组件状态管理
let state = reactive({
    tableData: [] // 存储资料列表数据的响应式数组
});

// 预览数据和弹窗状态
const previewData = ref({});       // 用于存储预览的资料数据
const dialogVisible = ref(false); // 控制弹窗显示/隐藏的响应式变量

// 生命周期钩子：组件挂载后加载资料列表数据
onMounted(() => {
  getTableData(); // 调用数据获取函数
});

// 获取资料列表数据的函数
const getTableData = async () => {

    // 通过当前用户ID从后端获取其创建的资料列表（用户ID从Vuex获取）
    const table = await axios.get(`/material/findByAuthor?author=${store.state.userInfo.id}`);
    state.tableData = table.data.data; // 更新为后端返回的真实数据
};

// 分类格式化函数：将数值分类转换为中文标签
const categoryFormat = (category) => {
  const arr = ["就业", "面试", "简历"]; // 分类标签数组，索引对应数值分类（从1开始）
  return arr[category - 1]; // 根据数值获取对应的中文标签
};

// 预览资料处理函数
const handlePreview = (data) => {
  previewData.value = data; // 将点击的资料数据赋值给预览数据
  dialogVisible.value = true; // 显示预览弹窗
};

// 删除资料处理函数
const handleDelete = async (item) => {
    const itemId = item.id; // 获取要删除的资料ID
    await axios.delete(`/material/deleteById?id=${itemId}`); // 发送删除请求
    await getTableData(); // 重新获取资料列表，更新页面显示
};

// 编辑资料处理函数
const handleEdit = (item) => {
    // 跳转到资料编辑页面，携带资料ID作为路由参数
    router.push(`/information-manage/materialEdit/${item.id}`);
};

</script>

<style lang="scss" scoped>
.el-table {
  margin-top: 50px; // 表格顶部间距，调整页面布局
}

::v-deep .htmlcontent {
  img {
    max-width: 100%; // 确保预览内容中的图片自适应容器宽度，避免溢出
  }
}
</style>